<template>
  <div class="my-select-text-box">
    {{ mappingItem.label }}
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: String | Number,
      default: ""
    },
    mapping: {
      type: Array,
      required: false,
      default: [
        {
          label: "",
          value: ""
        },
        {
          label: "",
          value: undefined
        },
        {
          label: "",
          value: null
        },
      ]
    }
  },
  watch: {
    "data": {
      handler(newVal) {
        this.initTag();
      }
    }
  },
  mounted() {
    this.initTag();
  },
  data() {
    return {
      mappingItem: {
        label: "",
        value: null
      },
    }
  },
  methods: {
    initTag() {
      this.mapping.forEach(item => {
        if (item.value == this.value) {
          this.mappingItem = item;
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.my-select-text-box {
  user-select: none;
}
</style>